<template>
	<view>
		<view class="top_header">
			<view>共{{ itemLength }}条数据</view>
			<view @click="getList(btn)" class="btn-item"  v-for="(btn, index) in fabButtons" :key="index">
				<u-icon :name="btn.icon" :size="btn.size"></u-icon>
				<view>{{ btn.name }}</view>
			</view>
		</view>
		<view class="content_text" v-if="itemLength > 0">
			<view class="content_info" v-for="(item,index) in classifyListArr" :key="index">
				<view style="margin-bottom: 5px;"  v-for="(option,indexo) in options" :key="indexo">
					<text v-if="option.value == item.catname" class="catName"></text> {{option.value == item.catname ?option.text:''}}
				</view>
				<view class="uni-container">
					<uni-table ref="table" border emptyText="暂无更多数据">
						<uni-tr>
							<uni-th width="150" height="1px" align="center">名称</uni-th>
							<uni-th  width="400" height="1px"  align="left">详情</uni-th>
							<uni-th class="table-cell" width="100" height="1px" align="center">预览</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in item.items" :key="index">
							<uni-td>{{ item.Name }}</uni-td>
							<uni-td>
								<view class="name">{{item.Remark}}[{{item.Creator}}{{item.CreateDate}}]</view>
							</uni-td>
							<uni-td  class="table-cell" align="center">
								<view class="uni-group">
										<uni-icons type="eye" size="20" @click="downFile(item)"></uni-icons>
								</view>
							</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
			
		</view>
		<view class="no-data" v-else>
			暂无数据
		</view>
		<u-popup @touchmove.prevent :zIndex="999999" :show="searchModel" @close="searchModel = false">
			<view style="background: #f7f7f7" class="vol-action-sheet-select-container" >
				<view style="background: #ffffff" class="vol-action-sheet-select-title">
					搜索
					<view class="f-icon" @click="searchModel = false">取消</view>
				</view>
				<slot name="searchHeader"></slot>
				<view class="vol-action-sheet-select-content">
					<view class="search-form">
						<view style="width: 90%;height: 35px;margin: 20px;border-radius: 5px;">
							<uni-data-select
							   v-model="form.catClass"
							   :localdata="options"
							 ></uni-data-select>
						</view>
						<input v-model="form.name" placeholder="请输入名称" style="border: 1px solid #9e9e9e;width: 85%;padding:5px 5px 5px 10px;margin: 20px auto;height: 5px;border-radius: 5px;background-color: #fff;"/>
					</view>
					<view class="search-btns">
						<view class="btn">
							<u-button @click="resetSearchForm()" :customStyle="{ 'border-radius': '6px' }" type="success" icon="reload" text="重置"></u-button>
						</view>
						<view class="btn">
							<u-button @click="searchClick" :customStyle="{ 'border-radius': '6px' }" type="primary" icon="search" text="搜索"></u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal
			:show="downloadModalShow"
			@confirm="downloadModalConfirm"
			@cancel="
				() => {
					downloadModalShow = false;
				}
			"
			closeOnClickOverlay
			@close="
				() => {
					downloadModalShow = false;
				}
			"
			content="是否下载文件"
			showCancelButton
			cancelText="取消"
		></u-modal>
		<u-modal
			:show="previewModalShow"
			@confirm="previewModalConfirm"
			@cancel="
				() => {
					previewModalShow = false;
				}
			"
			closeOnClickOverlay
			@close="
				() => {
					previewModalShow = false;
				}
			"
			:content="'是否预览文件'"
			showCancelButton
			cancelText="取消"
		></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemLength:0,
				fabButtons:[
					{
						icon: 'search',
						value: 'search',
						name: '查询',
						hidden: false,
						size: '20',
						color: 'rgb(7 185 14)',
						onClick: () => {
							this.getList();
						}
					}
				],
				classifyListArr:[],
				searchModel:false,
				selectValue:'',
				options :[],
				form:{
					catClass:'',
					name:'',
				},
				columnWidth:'200px',
				downloadModalShow: false, //控制下载模态框
				itemList:{},
				fileUrl: '', //文件下载地址
				downloadTask: null, //文件下载时，用来终止下载
				saveResult: null, //文件保存成功
				previewModalShow: false, //控制下载模态框
			}
		},
		onShow() {
			this.searchClick();
			this.getClassList();
		},
		
		methods: {
			getClassList(){
				this.http.get('api/q_serve_contract/Getfuwufenllei','',true).then(reslut=>{
					let ArrList = reslut.Sys_DictionaryList;
					
					 // this.options
					for(let i=0 ;i<ArrList.length;i++){
						let obj = { text: '', value: 0 }
						obj.text = ArrList[i].DicName;
						obj.value = ArrList[i].OrderNo;
						if(ArrList[i].OrderNo == 0){
							obj.value = '0'
						}
						this.options.push(obj)
					}
				})
			},
			change1() {
				this.form.catClass = this.$refs.selectRef.value
				console.log(this.$refs.selectRef.val())
			},
			getList(){
				this.searchModel = true;
				this.form.catClass = '';
				this.form.name = '';
			},
			groupByCategory(data, categoryKey){
				let grouped = data.reduce((acc, item) => {
					const category = item[categoryKey];
					if (!acc[category]) {
						acc[category] = {
							catname: category,
							items: []
						};
					}
					acc[category].items.push(item);
					return acc;
				}, {});
				// 最后统一返回分组结果
				return grouped;
			},
			searchGridFormOnChange(field, value, item) {
				//查询表单的select、日期组件选择事件
				this.searchFormOnChange && this.searchFormOnChange(field, value, item);
			},
			resetSearchForm(){
				this.form.catClass = '';
				this.form.name = '';
			},
			searchClick(){
				let wheres = [];
				if (this.form.catClass) {
					wheres.push({ name: 'Classify', value: this.form.catClass, displayType: 'select' });
				}
				if (this.form.name) {
					wheres.push({ name: 'Name', value: this.form.name, displayType: 'like' });
				}
				let params = {
					order: 'desc',
					page: 1,
					rows: 100,
					sort: 'CreateDate',
					wheres: JSON.stringify(wheres)
				};
				this.http.post('api/q_serve/getPageData',params,true).then((res)=>{
					for(let i=0;i<res.rows.length;i++){
						let url = res.rows[i].Attachment;
						let urlArr = url.split('/');
						res.rows[i].name = urlArr[4];
					}
					this.itemLength = res.rows.length; 
					this.classifyListArr = this.groupByCategory(res.rows, 'Classify'); 
					this.searchModel = false;
				})
			},
			downFile(item){
				this.itemList = item;
				this.downloadModalShow = true;
			},
			downloadModalConfirm(){
				console.log(this.itemList);
				this.downloadModalShow = false;
				this.fileUrl = this.$store.state.IP + this.itemList.Attachment
;
				this.downloadTask = uni.downloadFile({
					//调用官方提供的uni.downloadFile
					// url: this.fileUrl+"?t="+ new Date().getTime(), //将刚刚提前准备好的url传过来
					url: this.fileUrl,
					header: {
						//如果需要填写请求头信息则在此处填写
					},
					success: (res) => {
						if (res.statusCode === 200) {
							//下载成功，并把下载好的文件保存在临时区域中
							uni.saveFile({
								//使用该功能，以将临时文件保存在手机中可长久存储的区域
								tempFilePath: res.tempFilePath,
								success: (saveResult) => {
									// 在保存文件成功后，使用 uni.openDocument 方法打开文件
									console.log('文件保存成功:', saveResult);
									this.saveResult = saveResult;
									this.previewModalShow = true;
								},
								fail: function (err) {
									console.log('文件保存成功:', err);
									uni.showToast({
										icon: 'error',
										title: '保存文件失败'
									});
								}
							});
						}
					},
					fail: (err) => {
						console.log('下载失败：', err);
						uni.showToast({
							icon: 'error',
							title: '下载失败'
						});
					}
				});
			},
			previewModalConfirm() {
				this.previewModalShow = false;
				uni.openDocument({
					filePath: this.saveResult.savedFilePath,
					// fileType: fileType,  //这里把预先限定好的文件类型传来
					success: function () {
						console.log('文件打开成功!');
						//至此，手机会从app中跳转到文件预览界面
						//之后可从预览界面返回app中
					},
					fail: function (err) {
						console.log('打开失败', err);
					}
				});
			},
		}
	}
</script>

<style>
	.top_header{
		display: flex;
		justify-content: space-between;
		background-color: #f7f7f7;
		padding: 10px;
		font-size: 14px;
		color: #555;
	}
	::v-deep .uni-select{
		border: 1px solid #9e9e9e!important;
	}
	.content_text{
		padding: 10px;
	}
	.btn-item {
		height: 100%;
		align-items: center;
		display: flex;
		font-size: 28rpx;
		margin-left: 18rpx;
	}
	.table-content {
	  position: relative;
	}
	.content_text{
		background-color: #f7f7f7;
		/* width: 100%; */
		height: 100%;
		box-sizing:'border-box';
	}
	.catName{
		display: inline-block;
		background: #818181;
		border-radius:4px;
		padding:7px 2px;
		margin-right:5px;
	}
	.table {
	  display: flex;
	  flex-direction: column;
	  width: 900px;
	  background-color: #fff;
	  margin-bottom: 10px;
	  overflow-x: scroll;
	  border-radius: 5px;
	}
	.table-row {
	  display: flex;
	  flex-direction: row;
	}
	.vol-action-sheet-select-container {
		min-height: 600rpx;
		display: flex;
		flex-direction: column;
	
	}
	.vol-action-sheet-select-content {
		flex: 1;
		height: 0;
		background: #f7f7f7;
		overflow: scroll;
	}
		
	.btns {
		display: flex;
		padding: 30rpx 20rpx 40rpx 0;
		background: #f7f7f7;
		
		.btn {
			flex: 1;
			margin-left: 20rpx;
		}
	}
		
	.l-btn {
		display: inline-block;
		width: 100%;
		
		.btn {
			float: left;
			width: 31.5%;
			margin-left: 1.5%;
			margin-top: 20rpx;
		}
	}
	.vol-action-sheet-select-title {
		padding: 24rpx;
		text-align: center;
		position: relative;
		border-bottom: 1px solid rgb(233 233 233);
		
		// .vol-action-sheet-select-confirm {
		// 	position: absolute;
		// 	right: 30rpx;
		// 	color: #007AFF;
		// 	font-weight: 500;
		// }
		
		
	}
	.f-icon {
		position: absolute;
		right: 0rpx;
		top: 0;
		font-size: 28rpx;
		color: #2979ff;
		line-height: 49px;
		height: 47px;
		width: 80px;
		padding-right: 30rpx;
		text-align: right;
	}
	.search-btns {
		display: flex;
		padding: 30rpx 20rpx 40rpx 0;
		background: #f7f7f7;
	
		
	}
	.btn {
		flex: 1;
		margin-left: 20rpx;
	}
	.search-form{
		/* text-align: center; */
		background-color: #fff;
		height: 167px;
		position: relative;
		top:-20;
		margin-bottom: 20px;
		padding-top: 20px;
	}
	.no-data{
		text-align: center;
		padding-top: 15px;
	}
	.fixed-column {
	  position: sticky;
	  right: 0;
	  background-color: #fff;
	  z-index: 1;
	  border-left: 1px solid #ddd;
	  min-width: 80px;
	}
	.table-cell:last-child {
	  position: sticky; /* 使用sticky定位 */
	  right: 0; /* 固定在右侧 */
	  background-color: white; /* 设置背景色，确保在滚动时可见 */
	  z-index: 10; /* 确保在其他单元格之上 */
	}
	.uni-container{
		margin-bottom: 15px;
	}
</style>
